<template>
    <el-container class="sys_data_rule_container">
        <el-main>
            <el-card class="box-card">
                <el-row slot="header">
                    <el-col :span="8">
                        <el-button type="primary" icon="el-icon-plus"
                                   @click="openDialog(null, 'add')">新增
                        </el-button>
                    </el-col>
                    <el-col :span="10">
                        <el-tag type="info" style="background: #409EFF; color: white; height: 24px; line-height: 24px;">
                            <span>当前数据：</span>
                            <span v-if="activeRow">{{ activeRow.name }}</span>
                        </el-tag>
                    </el-col>
                    <el-col :span="6" style="text-align: right;">
                        <el-input type="text" style="width:200px;" v-model="searchForm.searchValue" />
                        <el-button type="primary" icon="el-icon-plus"
                                   @click="openRuleDialog()">新增
                        </el-button>
                        <el-button icon="el-icon-search" @click="handleRuleSearch()">查询</el-button>
                    </el-col>
                </el-row>
                <div class="card_container">
                    <el-row :gutter="10">
                        <el-col :span="8">
                            <vxe-table-template :data="dataList" :options.sync="tableOptions"
                                                @event="handleTableEvent" />
                        </el-col>
                        <el-col :span="16">
                            <rule ref="accessRule" :active="activeRow" />
                        </el-col>
                    </el-row>
                </div>
            </el-card>

            <component-dialog dialog-drag :options="componentDialogOption" />
        </el-main>
    </el-container>
</template>

<script>
import sysDataObjApi from "@common/api/system/sysDataObjApi";
import AccessForm from "../dialog/data-access/AccessForm";

export default {
    name: "SysDataObj",
    components: {
        Rule: () => import('./rule'),
    },
    data() {
        let $this = this;
        return {
            searchForm: {},
            dataList: [],
            tableOptions: {
                ref: 'sysDataObjTable',
                container: '.sys_data_rule_container',
                columns: [
                    {
                        label: '编码',
                        prop: 'code',
                        align: 'center',
                    },
                    {
                        label: '名称',
                        prop: 'name',
                        align: 'center',
                    },
                    {
                        label: '启用状态',
                        prop: 'state',
                        align: 'center',
                        render(h, { row, column }) {
                            return h("el-switch", {
                                props: {
                                    value: row[column.prop] === 1,
                                },
                                on: {
                                    change(value) {
                                        $this.$set(row, column.prop, value === true ? 1 : 0);
                                        $this.saveSysDataObjRow(row);
                                    },
                                },
                            });
                        },
                    },
                ],
                operates: {
                    fixed: 'right',
                    list: [
                        {
                            id: 'edit',
                            type: 'success',
                            icon: 'fa fa-pencil',
                            size: 'mini',
                            show: true,
                            tooltip: {
                                content: "编辑",
                            },
                            // permission: 'res_add',
                            method: (index, row) => {
                                this.openDialog(row, 'edit');
                            }
                        },
                    ],
                },
                pagination: {
                    pageIndex: 1
                },
            },
            activeRow: undefined,
        };
    },
    mounted() {
        let $this = this;
        $this.getList();
    },
    methods: {
        handleHeaderEvent(event) {
            let $this = this;
            $this.searchForm = $.extend({}, $this.searchForm, event.searchForm);
            $this.getList();
        },
        getList(init) {
            let $this = this;
            $this.dataList = [];
            if (init) {
                $this.tableOptions = $this.resetTablePagination($this.tableOptions);
            }
            let queryData = $this.getQueryParams($this.tableOptions);
            sysDataObjApi.findSysDataObjs(queryData, result => {
                $this.dataList = result.data || [];
                $this.tableOptions = $this.setTableTotal($this.tableOptions, result);
            });
        },
        handleTableEvent(event) {
            if (event.type === 'page') {
                this.getList();
                return;
            }
            if (event.type === 'cellClick' && this.$utils.isNotEmpty(event.columnOpt.prop)
                && event.columnOpt.prop !== 'state') {
                this.activeRow = event.row;
            }
        },
        openDialog(row, type) {
            const _this = this;
            let title = '编辑数据对象';
            if (type === "add") {
                title = '新增数据对象';
                row = {};
            }
            _this.openComponentDialog({
                width: '400px',
                title,
                component: AccessForm,
                propsData: {
                    row,
                },
                callback() {
                    _this.getList();
                },
            });
        },
        saveSysDataObjRow(row) {
            let $this = this;
            let subData = $.extend({}, row);
            sysDataObjApi.saveSysDataObj(subData, () => {
                $this.$message.success('保存成功！');
            });
        },
        openRuleDialog() {
            const _this = this;
            if (!_this.activeRow) {
                _this.$message.warning("请选择数据对象！")
                return;
            }
            if (_this.$refs.accessRule) {
                _this.$refs.accessRule.openDialog(null, 'add');
            }
        },
        handleRuleSearch() {
            const _this = this;
            if (!_this.activeRow) {
                _this.$message.warning("请选择数据对象！")
                return;
            }
            if (_this.$refs.accessRule) {
                _this.$refs.accessRule.getList(true, _this.searchForm);
            }
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.sys_data_rule_container {
    .box-card {
        .searchForm {
            .el-form-item--mini.el-form-item,
            .el-form-item--small.el-form-item {
                margin-bottom: 0;
            }
        }
    }

    /deep/ .el-card__body {
        width: 100%;
        height: calc(100% - 37px);

        .card_container {
            width: 100%;
            height: 100%;

            .el-row {
                width: calc(100% + 10px);
                height: 100%;

                .el-col {
                    height: 100%;
                }
            }
        }
    }
}
</style>
